<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css 选择器</title>
    <style type="text/css">
        *{
            /* 所有标签 */
            font-size: 50px;
        }
        div{
            /* 所有div标签 */
            color: darkcyan;
        }
        div:hover{
            /* 伪类选择器 */
            color: greenyellow;
        }
        #div1{
            /* id为div1的标签 */
            /* 通常id不重复 */
            background-color: beige;
        }
        .div2{
            /* 所有class为div2的标签 */
            background-color: azure;
        }
        .big{
            font-size: 80px;
        }
        .green p{
            /* class为green的p标签 */
            color: forestgreen;
        }
        .green h{
            color: cornflowerblue;
        }
        .blue .heigh{
            background-color: ivory;
            color: darkslateblue;
            height: 200px;
        }
        .line1,.line2,.line3{
            /* 组选择器 */
            font-size: 90px;
        }
        .line1{
            color: peru;
        }
        .line2{
            color: khaki;
        }
        .line3{
            color: lightsalmon;
        }

        .box01,.box02{
            font-size: 60px;
        }
        .box01:before{
            /* 伪元素，无法被选中*/
            content: "head    ";
        }
        .box02:after{
            content: "     lala";
        }

    </style>
</head>
<body>
    <div>this is first div</div>
    <div>this is second div</div>
    <p>this is p</p>
    <div id="div1" class="div2">this is a div with id</div><!-- id生效而div2未生效，因为id权重高于class -->
    <div class="div2">this is a div with class</div>
    <div class="div2 big">this is another div with class</div>
    <div class="green">
        <p>look at me!!!</p>
        <h>come on !!!</h>
    </div>
    <div class="blue">
        <p class="heigh">Looooooooooooooo</p>
    </div>

    <div class="line1">------------------------</div>
    <div class="line2">------------------------</div>
    <div class="line3">------------------------</div>

    <div class="box01">boxxxxxxxxxxxxxxxxxxx</div>
    <div class="box02">boxxxxxxxxxxxxxxxxxxx</div>
</body>
</html>